<template>
  <view class="container">
    <form @submit="handleSubmit">
      <!-- 图书封面 -->
      <view class="form-item">
        <view class="label">图书封面</view>
        <view class="upload-box" @click="chooseImage">
          <image v-if="form.cover" :src="form.cover" mode="aspectFill" class="preview" />
          <view v-else class="upload-btn">
            <text class="iconfont icon-camera"></text>
            <text>上传封面</text>
          </view>
        </view>
      </view>
      
      <!-- 图书信息 -->
      <view class="form-item">
        <view class="label">图书名称</view>
        <input 
          type="text" 
          v-model="form.title" 
          placeholder="请输入图书名称"
          maxlength="50"
        />
      </view>
      
      <view class="form-item">
        <view class="label">作者</view>
        <input 
          type="text" 
          v-model="form.author" 
          placeholder="请输入作者"
          maxlength="30"
        />
      </view>
      
      <view class="form-item">
        <view class="label">出版社</view>
        <input 
          type="text" 
          v-model="form.publisher" 
          placeholder="请输入出版社"
          maxlength="50"
        />
      </view>
      
      <view class="form-item">
        <view class="label">出版日期</view>
        <picker 
          mode="date" 
          :value="form.publishDate" 
          @change="handleDateChange"
        >
          <view class="picker">
            {{ form.publishDate || '请选择出版日期' }}
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <view class="label">页数</view>
        <input 
          type="number" 
          v-model="form.pages" 
          placeholder="请输入页数"
        />
      </view>
      
      <view class="form-item">
        <view class="label">分类</view>
        <picker 
          mode="selector" 
          :range="categories" 
          range-key="name"
          :value="categoryIndex"
          @change="handleCategoryChange"
        >
          <view class="picker">
            {{ categories[categoryIndex]?.name || '请选择分类' }}
          </view>
        </picker>
      </view>
      
      <!-- 图书简介 -->
      <view class="form-item">
        <view class="label">图书简介</view>
        <textarea 
          v-model="form.description" 
          placeholder="请输入图书简介"
          maxlength="500"
          class="textarea"
        />
        <text class="word-count">{{ form.description.length }}/500</text>
      </view>
      
      <!-- 位置信息 -->
      <view class="form-item">
        <view class="label">位置信息</view>
        <view class="location-box" @click="chooseLocation">
          <text class="location-text">{{ form.location || '请选择位置' }}</text>
          <text class="iconfont icon-location"></text>
        </view>
      </view>
      
      <!-- 提交按钮 -->
      <button 
        class="submit-btn" 
        form-type="submit"
        :disabled="!isFormValid"
      >
        发布
      </button>
    </form>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 表单数据
const form = ref({
  cover: '',
  title: '',
  author: '',
  publisher: '',
  publishDate: '',
  pages: '',
  categoryId: '',
  description: '',
  location: '',
  latitude: '',
  longitude: ''
});

// 分类数据
const categories = ref([
  { id: 1, name: '文学' },
  { id: 2, name: '科技' },
  { id: 3, name: '历史' },
  { id: 4, name: '艺术' },
  { id: 5, name: '经济' },
  { id: 6, name: '管理' },
  { id: 7, name: '教育' },
  { id: 8, name: '生活' }
]);

// 当前选中的分类索引
const categoryIndex = ref(0);

// 表单验证
const isFormValid = computed(() => {
  return form.value.cover &&
    form.value.title &&
    form.value.author &&
    form.value.publisher &&
    form.value.publishDate &&
    form.value.pages &&
    form.value.categoryId &&
    form.value.description &&
    form.value.location;
});

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      form.value.cover = res.tempFilePaths[0];
    }
  });
};

// 选择日期
const handleDateChange = (e: any) => {
  form.value.publishDate = e.detail.value;
};

// 选择分类
const handleCategoryChange = (e: any) => {
  const index = e.detail.value;
  categoryIndex.value = index;
  form.value.categoryId = categories.value[index].id;
};

// 选择位置
const chooseLocation = () => {
  uni.chooseLocation({
    success: (res) => {
      form.value.location = res.address;
      form.value.latitude = res.latitude;
      form.value.longitude = res.longitude;
    }
  });
};

// 提交表单
const handleSubmit = async () => {
  if (!isFormValid.value) return;
  
  try {
    uni.showLoading({ title: '发布中' });
    // TODO: 调用发布API
    // await publishBook(form.value);
    uni.showToast({
      title: '发布成功',
      icon: 'success'
    });
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  } catch (error) {
    uni.showToast({
      title: '发布失败',
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
  }
};
</script>

<style lang="scss">
.container {
  padding: 20rpx;
}

.form-item {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  input {
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    color: #333;
  }
  
  .picker {
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #333;
  }
  
  .textarea {
    width: 100%;
    height: 200rpx;
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }
  
  .word-count {
    font-size: 24rpx;
    color: #999;
    text-align: right;
    margin-top: 10rpx;
  }
}

.upload-box {
  width: 100%;
  height: 400rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .preview {
    width: 100%;
    height: 100%;
    border-radius: 8rpx;
  }
  
  .upload-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999;
    
    .iconfont {
      font-size: 60rpx;
      margin-bottom: 10rpx;
    }
    
    text {
      font-size: 28rpx;
    }
  }
}

.location-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  
  .location-text {
    flex: 1;
    font-size: 28rpx;
    color: #333;
    margin-right: 20rpx;
  }
  
  .iconfont {
    font-size: 40rpx;
    color: #999;
  }
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 32rpx;
  color: #fff;
  background: #4caf50;
  border-radius: 44rpx;
  margin-top: 40rpx;
  
  &[disabled] {
    background: #ccc;
  }
}
</style> 